<template>
    <div class="table_box">
        <el-table :empty-text="empty_text" :data="list" :style="{ 'border-bottom': 'none', 'min-width': minWidth, }"
            :header-cell-style="getRowClass" :cell-style="getRowStyle" ref="commonTable"
            @selection-change="handleSelectionChange" @sort-change="doSortChange" border height="calc(100% - 40px)"
            v-loading="bLoading" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" :load="load" :lazy="lazy"
            row-key="id" @row-click="$emit('row-click', arguments)"
            :element-loading-background="bigscreen ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)'" :stripe="stripe">
            <el-table-column type="expand" v-if="expendRow">
                <template slot-scope="props">
                    <slot :scope="props.row" name="expand"></slot>
                </template>
            </el-table-column>
            <el-table-column v-if="isSelect" type="selection" :selectable="isSelectable" :width="40">
            </el-table-column>
            <el-table-column v-if="sort" type="index" :label="sortLabel" :width="sortWidth">
            </el-table-column>
            <template v-for="(item, index) in tableList">
                <el-table-column v-if="item.children" :label="item.label">
                    <el-table-column v-for="(item2, index2) in item.children" :key="index2" :prop="item2.prop"
                        :label="item2.label" :width="item2.width" :sortable="item2.sortable"
                        :show-overflow-tooltip="item2.showtip === undefined ? true : item2.showtip" :min-width="item2.minWidth">
                        <template slot-scope="scope">
                            <expend v-if="item2.render" :render="item2.render" :row='scope.row' :column="item2"></expend>
                            <span v-else>
                                {{ scope.row[item2.prop] }}
                            </span>
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column v-else :key="index" :prop="item.prop" :label="item.label" :width="item.width"
                    :sortable="item.sortable" :show-overflow-tooltip="item.showtip === undefined ? true : item.showtip"
                    :render-header="item.renderHeader" placement="right" :min-width="item.minWidth" :fixed="item.fixed">
                    <template slot-scope="scope">
                        <expend v-if="item.render" :render="item.render" :row='scope.row' :column="item"></expend>
                        <span v-else>
                            {{ scope.row[item.prop] }}
                        </span>
                    </template>
                </el-table-column>
            </template>
            <el-table-column v-if="operate" :min-width="operaMinWidth" :label="operateLabel" :fixed="operateFixed">
                <template slot-scope="scope" name="scope">
                    <slot :scope="scope.row" :rowIndex="scope.$index"></slot>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagenavigatior_bar" v-if="navigatior">
            <div class="pagenavigatior" :style="{ 'left': navigatiorleft }">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" :pager-count="5"
                    :popper-class="poperclass">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Table',
    components: {
        expend: {
            render(h, params) {
                return this.render(h, params)
            },
            props: {
                row: Object,
                render: Function,
                // index: Number,
                column: {
                    type: Object,
                    default: null,
                },
            },
        }
    },
    props: {
        bigscreen: {
            type: Boolean,
            default: false
        },
        bLoading: {
            type: Boolean,
            default: false
        },
        list: {
            type: Array,
            default() {
                return [];
            }
        },
        tableList: {
            type: Array,
            default() {
                return [];
            }
        },
        sort: {
            type: Boolean,
            default: true
        },
        stripe: {
            type: Boolean,
            default: false
        },
        sortLabel: {
            type: String,
            default: '序号'
        },
        sortWidth: {
            type: Number,
            default: 70
        },
        operate: {
            type: Boolean,
            default: true
        },
        operateLabel: {
            type: String,
            default: '操作'
        },
        operateFixed: {
            type: Boolean | String,
            default: false
        },
        isSelect: {
            type: Boolean,
            default: false
        },
        currentPage: {
            type: Number,
            default: 1
        },
        pageSize: {
            type: Number,
            default: 10
        },
        pageSizes: {
            type: Array,
            default() {
                return [10, 20, 30]
            }
        },
        total: {
            type: Number,
            default: 0
        },
        navigatior: {
            type: Boolean,
            default: true
        },
        navigatiorleft: {
            type: String,
            default: "0"
        },
        minWidth: {
            type: String,
            default: "auto"
        },
        nHeight: {
            type: Number,
            default: document.documentElement.clientHeight - 230
        },
        mHeight: {
            type: Number,
            default: 0
        },
        operaMinWidth: {
            type: String,
            default: 'auto'
        },
        expendRow: {
            type: Boolean,
            default: false
        },
        empty_text: {
            type: String,
            default: '暂无数据'
        },
        poperclass: {
            type: String,
            default: ''
        },
        isSelectable: {
            type: Function,
            default(row, index) {
                if (row.is_default == 1 || row.user_id && row.is_this_user) {
                    return false
                } else {
                    return true
                }
            }
        },
        lazy: {
            type: Boolean,
            default: false
        },
        load: {
            type: Function,
            default(tree, treeNode, resolve) {

            }
        }
    },
    data() {
        return {
            multipleSelection: [],
        }
    },
    methods: {
        doShow() {
            console.log(123)
        },
        getRowClass({ row, column, rowIndex, columnIndex }) {
            if ((columnIndex == 0 || columnIndex == 1 && this.isSelect) && rowIndex == 0) {
                return 'height:39px;line-height:39px;padding:0;border-left:none;font-weight:normal;overflow-hidden;'
            } else {
                return 'height:39px;line-height:39px;padding:0;font-weight:normal;overflow:hidden;'
            }
        },
        getRowStyle({ row, column, rowIndex, columnIndex }) {
            return "height:46px;line-height:46px;padding:0;border-right:none;border-left:none;";
        },
        handleSizeChange(val) {
            this.$emit('changeSize', val)
        },
        handleCurrentChange(val) {
            this.$emit('changePage', val)
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
            this.$emit('changeSelect', val)
        },
        doclearSort() {
            this.$refs.commonTable.clearSort()
        },
        // isSelectable(row, index) {
        //     if (row.is_default == 1 || row.user_id && row.is_this_user) {
        //         return false
        //     } else {
        //         return true
        //     }

        // },
        doSortChange(obj) {
            this.$emit("changeSort", obj)
        },
        doClickPage() {
            console.log(123)
        }
    }
}

</script>
<style scoped lang="scss">
.table_box {
    height: 100%;
    width: 100%;

    .pagenavigatior_bar {
        padding-top: 6px;
        text-align: right;
    }
}

.el-table .cell.el-tooltip>* {
    text-overflow: ellipsis;
    overflow-x: hidden;
    white-space: nowrap;
}

.bigscreen {
    width: 100%;
    height: calc(100%-80px);

}
</style>
<style>
.el-table__fixed-right {
    right: 1px;
}

.el-table__fixed::before,
.el-table__fixed-right::before {
    background: none;
}

.el-table__fixed-body-wrapper {
    padding-bottom: 4px;
}

.el-select-dropdown.bigscreen {
    background: #000304;
    transform-origin: left top !important;
}

.el-select-dropdown.bigscreen .el-select-dropdown__item {
    color: #FFF;
}

.el-select-dropdown.bigscreen .el-select-dropdown__item.selected {
    color: #27a5c2;
    background: rgba(32, 134, 158, 0.2);
}

.el-select-dropdown.bigscreen .el-select-dropdown__item.hover,
.el-select-dropdown.bigscreen .el-select-dropdown__item:hover {
    background: rgba(32, 134, 158, 0.2);
    color: #fff;
}
</style>